<template>
	<view class="content">
		<view class="pay-box">
			<view class="pay-item">
				<view class="item-img"><image src="@/static/img/pay-for-incon3.png" mode="aspectFit"></image></view>
				<view class="item-txt">代付订单已创建成功，发给好友帮你付款吧~</view>
				<view class="item-info">
					<view class="info-title">代付金额</view>
					<view class="info-symbol">
						￥
						<view class="info-price">{{ info.money }}</view>
					</view>
          <template v-if="Object.keys(info).length > 0">
            <view class="paySuc green" v-if="info.ispays == '1'">
              <image src="@/static/img/green-scu.png" mode="aspectFit"></image>
              <text>支付成功</text>
            </view>
            <view class="paySuc" v-if="info.ispays == '2'">
              <text>订单取消</text>
            </view>
            <view class="info-transmit" v-else @click="goShare()">发送给微信好友</view>
          </template>

					<view class="info-txt">如果订单申请退款，已支付金额将原路退还给您的好友</view>
					<view class="info-cut"></view>
          <!--        产品详情-->
          <view class="item-contentinfo" @click="toOrderDetail" >
            <view class="item-content-left">
              <image class="image-wrapper" :src="order_info.product_image||'https://oss.bigchun.com/fali/uploads/20211027/f93e7f181e6016610841c444d5eb26c4.png'" ></image>
            </view>
            <view class="item-content-right">
              <view class="item-info-title">
                <view class="item-info-titles">
                  {{ order_info.pro_title }}
                </view>
                <view class="image-wrapper2">
                  <img class="image-wrapper" src="../../../static/img/right.png" mode="aspectFit"/>
                </view>
              </view>
              <view class="item-info-order">
                <text class="text-ellipsis" style="font-size: 12px">订单号 ： {{ order_info.order_sn }}</text>
              </view>
              <law-product-intro3 class="gray" v-if="order_info" :item="order_info"  :isshou="3" :userInfo="userInfo"></law-product-intro3>
              <order-list-other-nopay3 class="gray" v-if="order_info" :item="order_info"  :isshou="3" :userInfo="userInfo"></order-list-other-nopay3>
              <!--              <view class="item-info-miaoshu">-->
              <!--                <view>律师函</view> <view>律师函</view> <view>律师函</view> <view>律师函</view>-->
              <!--              </view>-->
              <!--              <view class="item-info-miaoshu">-->
              <!--                <view>{{ order_info.choose }}</view> <view>律师函</view> <view>律师函</view> <view>律师函</view>-->
              <!--              </view>-->
              <!--              <view class="item-info-miaoshu">-->
              <!--                <view>律师函</view> <view>律师函</view> <view>律师函</view>-->
              <!--              </view>-->
              <!--              <view class="item-info-price">-->
              <!--                ￥{{ order_info.fee_money }}-->
              <!--              </view>-->
            </view>
          </view>
				</view>
			</view>
		</view>
		<!-- 全局通用组件 -->
		<law-common ref="lawCommon"></law-common>
	</view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
var timers = null;
export default {
	data() {
		return {
			info: {},
			order_id:'',
			pay_type:'',
      order_info:'',
      // scene:'2', //1是提交订单进入  2是 其他方式进入
      orderxiangqing_id:''//订单详情id
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	onLoad(params) {
    if(params){
      if (params.order_id && params.pay_type) {
        this.order_id = params.order_id;
        this.pay_type = params.pay_type;
        this.scene = params.scene   //1是提交订单进入  2是 其他方式进入
        this.init();
        //定时任务
        // timers = setInterval(()=>{
        //   this.timers_init()
        // },3000)
      }
    }
	},
  onShow(params){
    if(params){
      if (params.order_id && params.pay_type) {
        this.order_id = params.order_id;
        this.pay_type = params.pay_type;
        this.scene = params.scene   //1是提交订单进入  2是 其他方式进入
        this.init();
      }
    }
  },
	methods: {
		async init() {
			let formData = {
				id: this.order_id,
				pay_type: this.pay_type,
				token: uni.getStorageSync('token')
			};
			let res = await this.$api('index.friend_pay', formData);
			let res2 = null;
			this.info = res.data;
			if(this.pay_type==2||this.pay_type==3||this.pay_type==4){
        this.orderxiangqing_id = res.data.order_id
      }else{
        this.orderxiangqing_id = this.order_id
      }
			if(this.pay_type!=5){
        let formData2 = {
          id: this.orderxiangqing_id,
          token: uni.getStorageSync('token')
        };
        res2 = await this.$api('index.orderDetail', formData2);
        this.order_info = res2.data.order
        this.order_info.product = res2.data.order.pro_name;
      }
      if(
          ((this.pay_type==2||this.pay_type==3||this.pay_type==4||this.pay_type==5)&&res.data.pay_status == 1)
          ||((this.pay_type!=2&&this.pay_type!=3&&this.pay_type!=4&&this.pay_type!=5)&&res2.data.pay_status==1)
      ){
        this.info.ispays = "1"   //支付成功
      } else if(
          (this.pay_type==1&&(String(res.data.pay_status) == '-1'))
          ||(this.pay_type==2&&(String(res.data.pay_status) == '2'||String(res.data.pay_status) == '3'))
          ||(this.pay_type==3&&(String(res.data.pay_status) == '2'||String(res.data.pay_status) == '3'))
          ||(this.pay_type==4&&(String(res.data.pay_status) == '2'||String(res.data.pay_status) == '3'))
      ){
        this.info.ispays = "2"   //订单取消
      }else{
        this.info.ispays = "0"  //常规状态
      }
      console.log("===this.info.ispays",this.info.ispays,this.info)
		},
    async timers_init() {
      let formData = {
        id: this.order_id,
        pay_type: this.pay_type,
        token: uni.getStorageSync('token')
      };
      let res = await this.$api('index.friend_pay', formData);
      let res2 = null;
      if(this.pay_type==2||this.pay_type==3||this.pay_type==4){
        this.orderxiangqing_id = res.data.order_id
      }else{
        this.orderxiangqing_id = this.order_id
      }
      if(this.pay_type!=5){
        let formData2 = {
          id: this.orderxiangqing_id,
          token: uni.getStorageSync('token')
        };
        res2 = await this.$api('index.orderDetail', formData2);
      }
      if(
          ((this.pay_type==2||this.pay_type==3||this.pay_type==4||this.pay_type==5)&&res.data.pay_status == 1)
          ||((this.pay_type!=2&&this.pay_type!=3&&this.pay_type!=4&&this.pay_type!=5)&&res2.data.pay_status==1)
      ){
        this.info.ispays = "1"
      } else if(
          (this.pay_type==1&&(String(res.data.pay_status) == '-1'))
          ||(this.pay_type==2&&(String(res.data.pay_status) == '2'||String(res.data.pay_status) == '3'))
          ||(this.pay_type==3&&(String(res.data.pay_status) == '2'||String(res.data.pay_status) == '3'))
          ||(this.pay_type==4&&(String(res.data.pay_status) == '2'||String(res.data.pay_status) == '3'))
      ){
        this.info.ispays = "2"
      }else{
        this.info.ispays = "0"
      }
    },
		goShare() {
      let userName = this.userInfo.username;
			// let userName = this.userInfo.username.replace(/(\d{3})\d*(\d{4})/,'$1****$2');
			let money = this.info.money;
			let shareInfo = {
				// title: `${userName}向您投来期盼的眼神 请您帮ta支付${money}元`,
        title: `请帮我付下款啦，万分感谢。`,
        content: `我在法力app上找律师帮我办事，实惠方便。`,
				imageUrl: `${this.$API_URL}/source/go.png`,
				path: `${this.$VIEW_URL}/#/pages/client/user/friend-pay?order_id=${this.order_id}&pay_type=${this.pay_type}&scene=${this.scene}&token=${ uni.getStorageSync('token')}&type=share`
			};
			console.log(shareInfo)

			const nav = navigator.userAgent;
			if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
				phone.share(JSON.stringify(shareInfo));
			} else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
				this.$bridge.callhandler('share', shareInfo, data => {
					// 处理返回数据
					console.log(data, '我走了这里');
				});
			}
		},
    toOrderDetail(){
      let params = {
        order_id: this.orderxiangqing_id,
        product_id: this.orderxiangqing_id,
        area_id: this.order_info.fali_serve_area_id,
        product_name: this.order_info.pro_name,
        bearFees: this.order_info.price_type,
        product_image: this.order_info.bg_image,
        type: 'change',
        edit: true,
        requirement:this.order_info.requirement,
        liaotian_images:this.order_info.liaotian_images,
        jietiao_images:this.order_info.jietiao_images,
        cuishou_images:this.order_info.cuishou_images,
        other_images:this.order_info.other_images,
        card_images:this.order_info.card_images,
        source:JSON.stringify(this.order_info.source),
        sale:this.order_info.sale,
        serve_name_text:this.order_info.serve_name_text,
        price_type_text:this.order_info.price_type,
        product_price_id:this.order_info.product_price_id,
      };
      this.jump('/pages/client/order/order-court-own', params);
    }
	},

};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.pay-item {
	background-image: url(@/static/img/pay-for-icon1.png);
	background-repeat: no-repeat;
	height: 360rpx;
	background-size: 100% 100%;
	.item-img {
		height: 80rpx;
		padding-top: 42rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.item-txt {
		margin: 32rpx 83rpx 36rpx;
		color: #ffffff;
	}
	.item-info {
		flex: 1;
		width: 710rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 16rpx;
		.info-title {
			display: flex;
			justify-content: center;
			padding-top: 42rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.info-symbol {
			display: flex;
			justify-content: center;
			padding-top: 41rpx;
			font-size: 34rpx;
			font-weight: bold;
			line-height: 60rpx;
			.info-price {
				font-size: 66rpx;
				line-height: 50rpx;
			}
		}
		.info-transmit {
			display: flex;
			width: 660rpx;
			height: 80rpx;
			margin: 40rpx auto 35rpx;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-size: 32rpx;
			background-color: #e02e24;
			border-radius: 10rpx;
		}
		.info-txt {
			display: flex;
			font-size: 26rpx;
			justify-content: center;
			color: #aaa;
		}
		.info-cut {
			height: 1rpx;
			background-color: #e9e9e9;
			margin: 39rpx 25rpx 0;
		}
		.info-bottom {
			display: flex;
			padding-bottom: 36rpx;
			.bottom-img {
				width: 120rpx;
				height: 120rpx;
				margin: 76rpx 17rpx 0 25rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.bottom-right {
				.right-txt {
					font-size: 32rpx;
					line-height: 18rpx;
					margin: 35rpx 0 14rpx;
					font-weight: bold;
				}
				.text-ellipsis {
					.tip-item {
						margin-left: 10rpx;
						font-size: 24rpx;
						color: #747474;
					}
				}
			}
		}
	}
}

.item-contentinfo{
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item-content-left{
    width: 66px;
    margin-right: 11px;
    height: 66px;
    .image-wrapper {
      width: 100%;
      height: 100%;
    }
  }
  .item-content-right {
    flex: 1;
    min-width: 0;
    .item-info-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 5px;
      .item-info-titles{
        font-size: 16px;
      }
      .image-wrapper2 {
        width: 10px;
        height: 16px;
        display: flex;
        align-items: center;
        margin-right: 0;
        .image-wrapper {
          width: 100%;
          height: 100%;
        }
      }
    }
    .item-info-order {
      display: flex;
      justify-content: space-between;
      color: #aaa;
      .text-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .item-info-miaoshu{
      display: flex;
      align-items: center;
      padding-bottom: 5px;
      color: #aaa;
    }
    .item-info-price{
      display: flex;
      align-items: center;
      color: #aaa;
    }
  }
}
.paySuc {
  margin: 20rpx;
  line-height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
  }
}
::v-deep .item-tip{
  padding-bottom: 5px;
}
::v-deep .item-prize{
  color: #aaa!important;
}
::v-deep .gray{
  font-size: 12px!important;
}
</style>
